<script setup>
import { onMounted } from "vue";
import RadioBlock from "../components/RadioBlock.vue";
import { useRoute, useRouter } from "vue-router";
import { Dialog } from "vant";
import Loading from "../components/Loading.vue";
import { deleteRecruit, getRecruitByRid, updateRecruit } from "../api/recruit";
import useLoadData from "../hooks/useLoadData";
//初始化
const route = useRoute();
const router = useRouter();
const { isError, isLoading, data } = useLoadData(
    getRecruitByRid(route.params.rid)
);
const VisibleOptions = [
    {
        text: "可见",
        value: 1,
    },
    {
        text: "不可见",
        value: 0,
    },
];

onMounted(() => {});
//标签效验规则 不能大于10个标签
const tagsValidator = value => value.split(" ").length <= 10;
//获取项目数据

//提交数据
const onSubmit = () => {
    updateRecruit(data.value).then(res => {
        if (res.code == 200) {
            router.push("/project/recruit/" + data.value.pid);
        }
    });
};
//删除项目
const onDelete = () => {
    Dialog.confirm({
        title: "确认删除",
        message: "删除后招募不可恢复，确认删除？",
    }).then(() => {
        deleteRecruit(data.value.rid, data.value.pid).then(res => {
            if (res.code == 200) {
                router.push("/project/recruit/" + data.value.pid);
            }
        });
    });
};
</script>

<template>
    <Loading :is-error="isError" :is-loading="isLoading" class="container">
        <van-form @submit="onSubmit" label-width="4em">
            <van-cell-group inset>
                <van-field
                    v-model="data.title"
                    :maxlength="50"
                    name="name"
                    label="招募标题"
                    placeholder="请输入招募标题"
                    :rules="[{ required: true, message: '不能为空' }]"
                />
                <van-field
                    v-model="data.introduce"
                    autosize
                    :maxlength="1000"
                    type="textarea"
                    name="introduce"
                    label="介绍"
                    placeholder="请输入介绍"
                />
                <van-field
                    v-model="data.tags"
                    autosize
                    :maxlength="200"
                    type="textarea"
                    name="tags"
                    label="标签"
                    placeholder="设置标签让更多人看到，不同标签请用空格隔开"
                    :rules="[
                        {
                            validator: tagsValidator,
                            message: '标签不能多于10个',
                        },
                    ]"
                />
                <van-field name="status" label="招募可见">
                    <template #input>
                        <RadioBlock
                            :list="VisibleOptions"
                            v-model:value="data.visible"
                        ></RadioBlock>
                    </template>
                </van-field>
            </van-cell-group>

            <div style="margin: 16px">
                <van-button
                    round
                    block
                    type="danger"
                    @click.prevent="onDelete"
                    native-type="submit"
                    style="margin-bottom: 10px"
                >
                    删除项目
                </van-button>
                <van-button
                    round
                    block
                    color="var(--main-color)"
                    native-type="submit"
                >
                    提交修改
                </van-button>
            </div>
        </van-form>
    </Loading>
</template>

<style scoped>
.container {
    padding: var(--page-padding) 0px;
}
</style>
